<template>
  <view class="content" v-if="info.fUserName">
	  <u-navbar :is-back="false" title="填写订单"
	    title-size="30"
	    :background="{background:'#2B88FE' }"
	    title-color="#fff">
	    <div class="head_icon">
	      <u-icon @click="$api.handleBackTo"
	        name="arrow-left" color="#fff"
	        size="36">
	      </u-icon>
	      <u-icon @click="$api.handleHomeTo"
	        name="home" color="#fff" size="36">
	      </u-icon>
	    </div>
	  </u-navbar>
	  
    <view class="topBox whiteBg u-skeleton">
      <view class="store borderBottom x-row" @click="gotoStoreIndex">
        <image :src="$api.MrkImg(info.fMrkId)" class="simg x-col-center u-skeleton-circle">
        </image>
        <view class="x-col sname x-col-center u-skeleton-rect">
          {{info.fMrkName}}
          <view class="khmc">
            电话：{{info.fTell}}
          </view>
          <view class="khmc">
            地址：{{info.fAddress}}
          </view>
        </view>
        <!-- <view class="status x-col-center">
          <view :class="info.fPayStatus==1?'wei':'yi'"> {{$api.getPayStatus(info.fPayStatus)}}
          </view>
          <view :class="info.fStatus==10?'yi':'wei'">
            {{$api.getTaskStatus(info.fStatus)}}
          </view>
        </view> -->
        <view class="status x-col-center">
         <!-- <view :class="info.fPayStatus==10?'yi':'wei'">
            {{$api.getPayStatus(info.fPayStatus)}}
          </view>-->
          <view v-if="info.fDeyUserId" :class="info.fDeyStatus==10?'yi':'wei'">
            {{$api.getDefStatus(info.fDeyStatus)}}
          </view>
        </view>
      </view>
    </view>
	<view class="topheader x-row " style="border: 0;">
	  <view class="titel x-col">
	   合计（元）：{{Alltotal()}}</view>
	  
	</view>
 
	<view class="topheader x-row " style="border: 0;">
	  <view class="titel x-col">
	   收款金额（元）</view>
	 <input placeholder="请输入" v-model="form.PayMoney" type="digit"
	    class="x-col x-col-center" border ></input>
	</view>
	 
	<view class="topheader x-row " style="border: 0;">
	  <view class="titel x-col">
	   付款方式</view>
	   <view class="upimg x-col-center">
	     <picker @change="confirm($event)" :range="payTypes" range-key="label">
	            {{payTypes[form.PayType].label}}
	            <u-icon style="margin-left:10rpx" name="arrow-down-fill" color="#666" size="20">
	            </u-icon>
	          </picker>
	   </view>
	
	</view>
   <view class="topheader x-row " style="border: 0;">
     <view class="titel x-col">
      送达商品</view>
   </view>
	 
    <view class="listgoods" v-for="(g,index) in form.prolist" :key="index">
      <view class="x-row">
        <image :src="orderImg(g)" class="goodsimg ">
        </image>
        <view class="x-col">
          <view class="x-row">
            <view class="goodstitel ">
              {{getTitle(g)}}
            </view>
          </view>
          <u-form :model="g" label-width="200rpx">
		 
			  <u-form-item label="单价（元）" v-if="g.fOrderProBuyType==1">
			    {{g.fPrice}}    &#32&#32  &#32&#32  （{{g.fUnit}} ） 
			  </u-form-item>
            <u-form-item label="订购数量" v-if="g.fOrderProBuyType==1">
              {{g.fCount}}
			 <span  v-if="g.fCoverCount>0 || g.fGiveCount>0 || g.fExcCount>0|| g.fRetCount>0"> 
			 (<span v-if="g.fCoverCount>0"> 盖子：{{g.fCoverCount}}  &#32&#32  &#32&#32 </span> 
			  <span v-if="g.fGiveCount>0">搭赠：{{g.fGiveCount}}  &#32&#32  &#32&#32  </span> 
			  <span v-if="g.fExcCount>0">调换：{{g.fExcCount}} &#32&#32  &#32&#32  </span> 
			    <span v-if="g.fExcCount>0">退货：{{g.fRetCount}}</span> )</span>  
            </u-form-item>
            <u-form-item label="车上库存数">
              {{g.fBeCount}}
            </u-form-item>
		  <u-form-item label="产品规格">
		    <picker @change="confirmPrice($event,g)" :range="g.PriceList" range-key="fUnit">
		      {{g.fUnit}}
		      <u-icon style="margin-left:10rpx" name="arrow-down-fill" color="#666" size="20">
		      </u-icon>
		    </picker>
		  </u-form-item>
		  <u-form-item label="单价（元）" v-if="g.fOrderProBuyType==2">
		    {{g.fPrice}}
		  </u-form-item>
		  
            <u-form-item label="实际-购买" v-if="g.fType==1">
				<input placeholder="请输入" v-model="g.fBuyCount" type="digit"   @input="ReSetNow(g)"
				   class="x-col x-col-center"></input>
            </u-form-item>
			<u-form-item label="实际-盖子"  v-if="g.fType==1">
				<input placeholder="请输入" v-model="g.fCoverCount" type="digit"  
				   class="x-col x-col-center"></input>
			</u-form-item>
			<u-form-item label="实际-搭赠"  v-if="g.fType==1 || g.fType==2">
				<input placeholder="请输入" v-model="g.fGiveCount" type="digit"  
				   class="x-col x-col-center"></input>
			</u-form-item>
			<u-form-item label="实际-调换"  v-if="g.fType==1 || g.fType==3">
				<input placeholder="请输入" v-model="g.fExcCount" type="digit"  
				   class="x-col x-col-center"></input>
			</u-form-item>
			<u-form-item label="实际-退货"  v-if="g.fType==1 || g.fType==4">
				<input placeholder="请输入" v-model="g.fRetCount" type="digit"   @input="ReSetNow(g)"
				   class="x-col x-col-center"></input>
			</u-form-item>
			<u-form-item label="合计金额">
			 {{g.fMoney}}
			</u-form-item>
            <u-form-item label="到期时间">
              <view @click="dateDialog=true;currenIndex=index">
                {{g.fOverTime}} <u-icon size="size" style="margin-left:10rpx" color="#666"
                  name="arrow-down-fill"></u-icon>
              </view>
            </u-form-item>
          </u-form>
        </view>
      </view>
    </view>
    <u-picker v-model="dateDialog" mode="time" @confirm="changeDate" :params="params"></u-picker>
    <view class="x-row" style="padding: 25upx 0;border-top: 1px solid #e5e5e5;" @click="selectGood">
      <view class="x-col">
      </view>
      <image src="../../static/addicon.png" class="imgadd x-col-center">
      </image>
      <view class="bu_text x-col-center">
        添加送货产品</view>
      <view class="x-col">
      </view>
    </view>

    <view class="topheader x-row " style="border: 0;" @click="imgshow">
      <view class="titel x-col">
        拍照（非必填）</view>
      <view class="upimg x-col-center">
        <view class="addBtn">
          {{payImgText}}
        </view>
      </view>
      <u-icon name="arrow-right" color="#979797" size="26rpx" class="x-col-center">
      </u-icon>
    </view>
    <view class="topheader x-row " style="border: 0;">
      <view class="titel x-col">
        备注（非必填）</view>
      <u-input type="textarea" border v-model="form.DefInfo">
      </u-input>
    </view>
    <view class="h16"></view>
    <!--    <view class="topheader ">
      <navigator class="x-row" url="./personnellist_show" hover-class="none">
        <view class="titel x-col">司机人员</view>
        <view class="rightimg x-col-center">
          <image src="../../static/logo.png" v-for="(item,index) in 3" :key="index" class="img60">
          </image>
        </view>
        <u-icon name="arrow-right" color="#979797" size="26rpx"></u-icon>
      </navigator>
    </view> -->
    <view :style="{height:height}">
    </view>
    <view class="viewbbutton" :style="{height:height}">
      <view class="x-row" style="padding: 10upx 0;">
        <u-button type="primary" size="medium" class="el-block" v-if="info.fStatus==2  && info.iIsMyDef==1"
          @click="nowSend">
          立即送达
        </u-button>
      </view>
    </view>
  </view>
</template>

<script>
import approval from '../../components/approval'
export default {
  components: {
    approval
  },
  data() {
    return {
		dialog: false,
		payTypes: [
		  {
		    label: '现金',
		    value: 0
		  },
		  {
		    label: '企业微信',
		    value: 1
		  }, 
		  {
			 label: '银行转账',
			  value: 2
		  } 
		],
      params: {
        year: true,
        month: true,
        day: true,
        hour: false,
        minute: false,
        second: false
      },
      currenIndex: 0,
      form: {
        DeyTaskId: 0,
        DefPic: '',
        DefInfo: '',
		PayMoney:0,
		PayType: 0,
        prolist: [],
		action:'add'
      },
	  total:0,
      img: this.urlimg,
      height: this.but_height(),
      dats: new Date(),
      taskId: '',
      id: '',
      info: {},
      showPay: false,
      prc: '',
      action: '', //sj 司机 表示只查看，只能支付
      utype: '',
      dateDialog: false,
      show: false,
 
      loading: true
    }
  },
  onLoad(e) {
    console.log(e)
    this.id = e.id
    this.taskId = e.taskId
    this.form.DeyTaskId = Number(e.id)
    this.action = e.status
	this.form.action=this.action
    uni.setNavigationBarTitle({
      title: '送达信息填写'
    })

    this.orderInfo()
  },
 
  methods: {
	  Alltotal() {
	  	
	    this.total= this.form.prolist.reduce((v, m) => {
	       
	        v += (m.fBuyCount * m.fPrice)-( m.fRetCount * m.fPrice)
	       
	      return v
	    }, 0)
	    return  this.total.toFixed(2)
	  },
    changeDate(e) {
      const item = this.form.prolist[this.currenIndex]
      item.fOverTime = `${e.year}-${e.month}-${e.day}`
      this.$set(this.form.prolist, this.currenIndex, item)
    },
  confirm(e) {
	  this.form.PayType = e.detail.value
	//  console.log('this.form.PayType:', this.form.PayType)
    },
	confirmPrice(e, item) {
		//console.log('onSelect --- ', item)
	  // console.log('e --- ', e, item)
	   let info = item.PriceList[e.detail.value]
	 	//console.log('onSelect --- ', JSON.stringify(result))
	  item.fUnit = info.fUnit
	  item.fPrice = info.fPrice
	  item.fMoney=(item.fPrice*item.fBuyCount)-(item.fPrice*item.fRetCount)
	  this.$forceUpdate()
	},
	ReSetNow(item){
		// console.log("ReSetNow", item)
	 //  this.$forceUpdate()
	   item.fMoney=((parseInt(item.fBuyCount) * item.fPrice)-(parseInt(item.fRetCount) * item.fPrice)).toFixed(2)
	   this.$forceUpdate()
	},
	
    getTitle(g) {
      if (g.fTitle) {
        return g.fTitle
      } else {
        return g.fProName
      }
    },
	showTotal(item) {
	  return (item.fBuyCount * item.fPrice).toFixed(2)
	},
    orderImg(g) {
      if (g.fProId) {
        return this.$api.OrderImg(g.fProId)
      } else {
        return this.$api.OrderImg(g.fId)
      }
    },
    selectGood() {
      // this.action = e;
      uni.navigateTo({
        url: '/pages/sale/draw/drawSelect'
      })
      this.form.prolist.forEach(x => {
        if (x.fProId) x.fId = x.fProId
      })

      getApp().globalData.addCusGoodLi = this.form.prolist
    },
    personSelect() {
      uni.navigateTo({
        url: '/pages/sale/personnellist'
      })
    },
  
    getimg(item) {
      if (item.fHeadPic) {
        return item.fHeadPic
      } else {
        return this.$api.UserImg(item.fUserId)
      }
    },
    nowSend() {
      let that = this
      if (!that.form.prolist.length) {
        uni.showToast({
          title: '请添加送达商品',
          duration: 2000,
          icon: 'none'
        })
        return false
      }
      function setForm() {
        that.form.prolist.forEach(x => {
          if (!x.fType) x.fType = 1
          if (!x.fProId) {
            x.fProId = x.fId
            x.fId = 0
          }
          x.fCount=x.fBuyCount
		
        //  if (that.action === 'order') {
         //   x.fOrderProBuyType = 1
         // } else {
         //   x.fOrderProBuyType = 2
         // }
        })
		  that.form.PayType=parseInt(that.form.PayType)+1
      }
      uni.showModal({
        title: '确认立即送达该订单吗',
        success(res) {
          if (res.confirm) {
            setForm()
            that
              .$axios('api/CarDeyTask/CompleteDeyTask', 'post', {
                value: that.form
              })
              .then(res => {
                if (!res.Success) {
                  uni.showToast({
                    title: '提交失败：' + res.Message,
                    icon: 'none',
                    duration: 2000
                  })
                  return false
                }
              // that.$api.handleToUrl('送达成功', '/pages/sale/order_detail?id='+ that.id)
              //  that.orderInfo()
			  getApp().globalData.addCusGoodLi = null
			  getApp().globalData.sureSelectImg = null
			  
                that.$api.handleBack('送达成功', 2)
          
              })
          }
        }
      })
    },
    gotoStoreIndex() {
      uni.navigateTo({
        url: '/pages/my_customer/my_customer_client?id=' + this.info.fMrkId + '&taskId=' + this.taskId
      })
    },
    topayDetail() {
      this.$api.navigator('payDetail?id=' + this.id)
    },
    // order/OrderInfo 			订单详情
    orderInfo() {
      let that = this
      that.loading = true
      this.$axios('api/OrderBasic/GetAllDetail', 'post', { value: this.id }).then(res => {
        that.info = res.Value
        that.form.prolist = res.Value.OrderProList
		 that.form.prolist.forEach(x => {
		    // x.fBuyCount = x.fCount
			  x.fOrderProBuyType = 1
		   })
 
        that.loading = false
      })
    },
    imgshow() {
      uni.navigateTo({
        url: '/pages/sale/ordervoucher'
      })
    }
  },
  computed: {
    fPriceType() {
      let i = this.info.fPriceType
      if (i == 2) return '折扣价'
      else if (i == 3) return 'Vip价'
      else return ''
    },
    payImgText() {
      if (!this.form.DefPic) return '请上传照片'
      let num = this.form.DefPic.split(',').length
      return num + '张照片'
    }
  },
  onShow() {
	  console.log("prolist1")
	  console.log(this.form.prolist)
	  
	  
    if (getApp().globalData.addCusGoodLi) {
      getApp().globalData.addCusGoodLi.forEach(x => (x.fOverTime = x.fDoTime))
	 // this.form.prolist = getApp().globalData.addCusGoodLi
      let newprolist = getApp().globalData.addCusGoodLi
 
	  newprolist.forEach(x => {
		 let filtered = this.form.prolist.filter(item =>
		    item.fId==x.fId
		  );

		  
		  if(filtered.length)
		  {
			 
			  x.fBuyCount = filtered[0].fBuyCount
			  x.fBeCount=filtered[0].fBeCount
		  }
		  else
		  {
			   x.fCount = 0
			    x.fMoney = 0
			   x.fBuyCount = 0
			   x.fBeCount=x.fCarCount
			   x.fPrice=x.fDefPrice
		       x.fRetCount=0
			   x.fUnit=x.fDefUnit
			   x.fType = 1
			   x.fCoverCount=0
			   x.fGiveCount=0
			   x.fExcCount=0
			   x.fOrderProBuyType=2
			   x.fProId=x.fId
			  
			 this.form.prolist.push(x)
		  }
	    })
  
 
 
     // this.form.prolist=newprolist
		
	  // console.log("2")
	  //   console.log(this.form.prolist)
    }
    if (getApp().globalData.sureSelectImg) {
      this.form.DefPic = getApp()
        .globalData.sureSelectImg.map(x => x.sFileUrl)
        .toString()
    }
  }
  //onHide:{},  //监听页面隐藏
  //onUnload:{},	//监听页面卸载
  //onPullDownRefresh:{},  //监听用户下拉动作，一般用于下拉刷新  page.json  "enablePullDownRefresh":true,//开启下拉刷新
  //onReachBottom:{}, //页面滚动到底部
  //onShareAppMessage:{}, 用户点击右上角分享
}
</script>

<style scoped lang="scss">
.h16 {
  height: 16rpx;
  background-color: #f5f7f9;
}
.status {
  font-size: 32rpx;
  color: #007aff;
  padding-left: 10rpx;
}
.slot-content {
  padding: 24rpx 48rpx;
  box-sizing: border-box;
  .priceipt {
    background: #f8f9fc;
    padding: 0 20rpx;
    box-sizing: border-box;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 28rpx;
  }
  .ts {
    font-size: 24rpx;
    font-weight: 400;
    color: #999999;
    line-height: 36rpx;
    // margin-bottom: 32rpx;
  }
}
.topBox {
  .info {
    padding: 32rpx 32rpx 16rpx 32rpx;
    box-sizing: border-box;

    .itxt {
      padding-bottom: 16rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #34404a;
      line-height: 40rpx;

      .s1 {
        width: 160rpx;
        color: #979797;
        font-size: 32rpx;
        display: inline-block;
      }

      .yhj {
        width: 96rpx;
        height: 40rpx;
        text-align: center;
        border-radius: 20rpx;
        display: inline-block;
        line-height: 40rpx;
        border: 2rpx solid #2b88fe;
        font-size: 28rpx;
        color: #2b88fe;
        margin-left: 16rpx;
      }

      .mingxi {
        font-weight: 400;
        color: #2b88fe;
        line-height: 42rpx;

        .iconfont {
          font-size: 25rpx;
        }

        display: inline-block;
        margin-left: 16rpx;
      }
    }
  }

  .store {
    padding: 24rpx 32rpx;
    box-sizing: border-box;

    .simg {
      width: 96rpx;
      height: 96rpx;
      margin-right: 16rpx;
      background-color: #f2f2f2;
      border-radius: 10rpx;
    }

    .sname {
      font-size: 36rpx;
      font-weight: 500;
      color: #333333;
      line-height: 36rpx;
      padding: 0 20rpx 0 0;
    }

    .khmc {
      padding-top: 10rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #999999;
    }

    .pay {
      width: 144rpx;
      height: 64rpx;
      line-height: 64rpx;
      text-align: center;
      font-size: 28rpx;
      font-weight: 400;
      color: #1677ff;
      border-radius: 32rpx;
      border: 1rpx solid #2b88fe;
    }

    .iconyou {
      color: #999999;
    }
  }
}

.topheader {
  padding: 0 32upx;
  border-bottom: 1px solid rgba(0, 0, 0, 0.09); background: #fff;
}

.titel {
  color: #34404a;
  font-size: 32upx;
  padding: 15upx 0;
}

.img60 {
  width: 60upx;
  height: 60upx;
  border-radius: 30upx;
}

.img60:nth-child(1) {
  transform: translateX(60upx);
}

.img60:nth-child(2) {
  transform: translateX(30upx);
}

.imgadd {
  width: 26upx;
  height: 26upx;
  display: block;
}

.bu_text {
  color: #2b88fe;
  font-size: 28upx;
  padding-left: 10upx;
}

.addBtn {
  color: #999;
}
.u-form-item{line-height: 10upx;}
.price {
  color: #eb3e00;
  font-size: 32upx;
}

.label {
  color: #2b88fe;
  border: 1px solid #2b88fe;
  padding: 3upx 10upx;
  border-radius: 30upx;
  font-size: 24upx;
  margin-left: 10upx;
}

.interval {
  color: #333;
  font-size: 32upx;
  line-height: 110upx;
  padding: 0 32upx;
}

.listgoods {
  padding: 32upx;
  border-bottom: 1px solid #f8f8f8;
}

.goodsimg {
  width: 144upx;
  height: 144upx;
  display: block;
  margin-right: 24upx;
}

.goodstitel {
  color: #000;
  font-size: 32upx;
}

.rights {
  color: #000;
  font-size: 333;
  font-size: 32upx;
}

.nuber {
  color: #666;
  font-size: 28upx;
  padding-top: 10upx;
}

.time {
  color: #666;
}

.prme {
  color: #000;
  font-size: 32upx;
  font-weight: bold;
}

.viewbbutton {
  position: fixed;
  bottom: 0;
  background: #fff;
  width: 100%;
  .x-row {
    display: flex;
    justify-content: center;
    ::v-deep button {
      margin: 0 20rpx;
    }
  }
}

.buttom {
  width: 95%;
  background: #007aff;
  border-radius: 16upx;
  text-align: center;
  line-height: 80upx;
  margin: auto;
  margin-top: 10upx;
  color: #fff;
  font-size: 32upx;
}
.leftbut {
  border: 1px solid #999;
  text-align: center;
  font-size: 32upx;
  color: #333;
  line-height: 80upx;
  border-radius: 16upx;
}
.right {
  border-color: #007aff;
  color: #fff;
  background: #007aff;
}
u-button + u-button {
  margin-left: 10rpx;
}
.u-input {
  border: 1px solid #dddd;
  padding: 10rpx;
}
</style>
